<template>
  <div>
    <el-dialog
      :visible="dialogVisible"
      :close-on-click-modal="false"
      :title="elDialogTitle"
      width="500px"
      top="5%"
      :before-close="cancelClose"
    >
      <el-form ref="addform" :model="addform" :rules="rules" label-width="90px">
        <el-form-item label="大屏编码" v-if="operateType != 'add'">
          <el-input
            v-model="addform.reportCode"
            clearable
            :disabled="operateType != 'add'"
          ></el-input>
        </el-form-item>
        <el-form-item label="大屏名称" prop="reportName">
          <el-input
            v-model="addform.reportName"
            clearable
            :disabled="operateType === 'relate'"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="链接地址"
          prop="url"
          v-if="operateType != 'relate'"
        >
          <el-input v-model="addform.url" clearable></el-input>
        </el-form-item>
        <div v-if="operateType != 'relate'">
          <el-form-item
            :label="`参数名称${index + 1}`"
            v-for="(item, index) in paramList"
            :key="index"
          >
            <el-input
              v-model="item.param"
              clearable
              ref="paramIpt"
              placeholder="输入参数名称"
            >
              <el-button
                icon="el-icon-plus"
                slot="append"
                @click="() => paramList.push({ param: '' })"
              ></el-button>
              <el-button
                icon="el-icon-minus"
                slot="append"
                @click="delParam(index)"
              ></el-button>
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="关联指标" v-if="operateType === 'relate'">
          <el-select v-model="addform.indexIds" multiple filterable>
            <el-option
              v-for="item in indicatorList"
              :key="item.id"
              :label="item.indexName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          @click="previewLargeScreen"
          :disabled="!addform.url?.length > 0"
          >预览大屏</el-button
        >
        <el-button @click="cancelClose">取 消</el-button>
        <el-button type="primary" @click="sureAdd">确 定</el-button>
      </span>
    </el-dialog>
    <previewLargeScreen ref="previewLargeScreen"></previewLargeScreen>
  </div>
</template>

<script>
import {
  insertReportManage,
  updateReport,
  findAllByReportId,
  findIndicator,
  saveReportIndex
} from '@/apis/largeScreenConfig.js'
import previewLargeScreen from './PreviewScreen.vue'
export default {
  components: { previewLargeScreen },
  data() {
    return {
      indicatorList: [],
      elDialogTitle: '新建',
      operateType: 'add',
      addform: {
        reportName: '',
        url: '',
        param: '',
        indexIds: [],
        reportCode: '',
        id: ''
      },
      paramList: [],
      dialogVisible: false,
      rules: {
        reportName: [{ required: true, message: '请输入', trigger: 'blur' }],
        url: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      showRelate: false
    }
  },
  mounted() {},
  methods: {
    sureAdd() {
      this.$refs.addform.validate((valid) => {
        let param = this.paramList.map((item) => {
          return item.param
        })
        this.addform.param = param.join()
        if (valid) {
          switch (this.operateType) {
            case 'add':
              insertReportManage(this.addform).then((res) => {
                if (res.code === 200) {
                  this.cancelClose()
                  this.$message.success('添加成功')
                  this.$parent.search()
                } else {
                  this.$message.warning(res.msg || '添加失败！')
                }
              })
              break
            case 'edit':
              updateReport(this.addform).then((res) => {
                if (res.code === 200) {
                  this.cancelClose()
                  this.$message.success('编辑成功')
                  this.$parent.search()
                } else {
                  this.$message.warning(res.msg || '编辑失败！')
                }
              })
              break
            case 'relate':
              Object.assign(this.addform, {
                reportId: this.addform.id
              })
              saveReportIndex(this.addform).then((res) => {
                if (res.code === 200 && res.data > 0) {
                  this.dialogVisible = false
                  this.$message.success('关联指标成功')
                  this.$parent.search()
                } else {
                  this.$message.warning(res.msg || '关联指标失败！')
                }
              })
              break
          }
        } else {
          this.$message.warning('请按要求填写表单！')
          return false
        }
      })
    },
    getRelatedIndicator() {
      findIndicator().then((res) => {
        if (res.code === 200) {
          this.indicatorList = res.data
        }
      })
    },
    findIndicator(row) {
      findAllByReportId({ reportId: row.id }).then((res) => {
        if (res.code === 200) {
          Object.assign(this.addform, row)
          this.addform.indexIds = []
          res.data.filter((item) => {
            this.addform.indexIds.push(item.id)
          })
        }
      })
    },
    previewLargeScreen() {
      if (this.addform.url?.length > 0) {
        this.$refs.previewLargeScreen.show(this.addform.url, this.paramList)
      }
    },
    delParam(index) {
      if (this.paramList?.length > 1) {
        this.paramList.splice(index, 1)
      } else {
        this.paramList[0].param = ''
      }
    },
    show(row, type) {
      this.dialogVisible = true
      this.operateType = type
      switch (type) {
        case 'add':
          this.elDialogTitle = '新建'
          this.addform = this.$options.data().addform
          this.paramList = [{ param: '' }]
          break
        case 'edit':
          this.elDialogTitle = '编辑'
          Object.assign(this.addform, row)
          this.paramList = []
          this.addform.param?.split(',').map((val) => {
            this.paramList.push({ param: val })
          })
          // console.log(this.paramList)
          break
        case 'relate':
          this.elDialogTitle = '关联指标'
          this.getRelatedIndicator()
          this.findIndicator(row)
          break
      }
    },
    cancelClose() {
      this.dialogVisible = false
      this.addform = this.$options.data().addform
      this.$refs.addform.resetFields()
    },
    // 成功失败日志
    logSuccessOrError(data, type) {
      this.addLog(1, this.elDialogTitle == '编辑' ? 'edit' : 'add', data, type)
    }
  }
}
</script>

<style lang="less" scoped></style>
